<template>
	<view>
		<view  v-if="!auditShow">
			<other></other>
		</view>
		<view class="report_change flex_row_center_center" v-if="auditShow" @click="userChange">
			<image class="report_change_icon" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yijing/change_icon.png" mode="aspectFit"></image>
		    <view>切换档案生成新的报告</view>
		</view>
		<view class="textbox" v-if="auditShow">
			<!-- <view class="shixiang">
			 
				<view class="title">
					事项
				</view>
				<view class="line">
					 
				</view>
				<view class="sx_cont conttex">
					测算何事
				</view>
			</view> -->
			<view class="panshi">
				<!-- 盘式 -->
				<view class="title">
					盘式
				</view>
				<!-- <view class="line">
						
				</view> -->
				<view class="sx_cont conttex">
					转盘奇门-坤宫-拆补-值使门起
				</view>
			</view>
			<view class="riqi">
				<!-- 日期 -->
				<view class="title">
					日期
				</view>
				<!-- <view class="line">
					 
				</view> -->
				<view class="rq_cont conttex">
					{{qipaninfo.date}}
				</view>
			</view>
			<view class="ganzhi">
				<!-- 干支 -->
				<view class="title">
					干支
				</view>
				<!-- <view class="line">
				 
				</view> -->
				<view class="gz-cont conttex">
					<view class="year gz_cont_item">
						<view class="tian">
							{{qipaninfo.nianGan}}
						</view>
						<view class="di">
						{{qipaninfo.nianZhi}}
						</view>
					</view>
					<view class="yue gz_cont_item">
						<view class="tian">
							{{qipaninfo.yueGan}}
						</view>
						<view class="di">
						{{qipaninfo.yueZhi}}
						</view>
					</view>
					<view class="ri gz_cont_item">
						<view class="tian">
							{{qipaninfo.riGan}}
						</view>
						<view class="di">
							{{qipaninfo.riZhi}}
						</view>
					</view>
					<view class="shi gz_cont_item">
						<view class="tian">
							{{qipaninfo.shiGan}}
						</view>
						<view class="di">
							{{qipaninfo.shiZhi}}
						</view>
					</view>
				</view>
			</view>
			<view class="kongwang">
				<view class="title">
					空亡
				</view>
				<!-- <view class="line">
					
				</view> -->
				<view class="kw_cont">
					<view class="year kw_cont_item">
						{{qipaninfo.nianKongWang}}
					</view>
					<view class="yue kw_cont_item">
						{{qipaninfo.yueKongWang}}
					</view>
					<view class="ri kw_cont_item">
						{{qipaninfo.riKongWang}}
					</view>
					<view class="shi kw_cont_item">
					{{qipaninfo.shiKongWang}}
					</view>
				</view>
			</view>
			<view class="jieqi">
				<!-- 节气 -->
				<view class="title">
					节气
				</view>
				<!-- <view class="line">
					
				</view> -->
				<view class="jq_cont conttex">
					{{qipaninfo.jieQi}}
				</view>
			</view>
			
			<view class="title_num">
				<view class="title_item" >
					<view class="title">
						旬首
					</view>
					
					<view class="ti_cont">
						{{qipaninfo.xunShou}}
					</view>
				</view>
				<view class="title_item title_width"  style="text-align: center;">
					<view class="title">
						局数
					</view>
					<view class="line">
						
					</view>
					<view class="ti_cont">
					 {{qipaninfo.juShu}}
					</view>
				</view>
				<view class="title_item title_width" >
					<view class="title">
						值符
					</view>
					<view class="line">
						
					</view>
					<view class="ti_cont">
						{{qipaninfo.zhiFu}}
					</view>
				</view>
				<view class="title_item title_width" >
					<view class="title">
						值使
					</view>
					<view class="line">
						
					</view>
					<view class="ti_cont">
						{{qipaninfo.zhiShi}}
					</view>
				</view>
				<view class="title_item_m title_width" >
					<view class="title">
						马星
					</view>
					<view class="line">
						
					</view>
					<view class="ti_cont">
						{{qipaninfo.maXing}}
					</view>
				</view>
			</view>
			<!-- 九宫格 -->
			<view class="nine_box">
					 
							<uni-grid :column="3" :highlight="true" :showBorde="true">
								<!-- 八卦宫位局数 -->
								<uni-grid-item v-for="(item,index) in ninegongnum" :index="index" >
									<view  class="grid-item-box" style="background-color: #fff;display: flex;">
										
										<view v-if="item.baShen" class="shenpan" style="padding:0 20rpx;width: 100%;text-align: center;font-size: 30rpx;display: flex;align-items: center;">
											<view v-if="item.isKongWang" class="" style="margin-right: 20rpx;">
												<uni-icons type="circle" size="18"></uni-icons>
											</view>
											<view class="">
												{{item.baShen}}
											</view>
											
										</view>
										<view class="tianpan" style="display: flex;justify-content: space-between;width: 100%;padding:20rpx 20rpx;">
										   <view v-if="item.diZhi" class="left_gz" style="color: #cecece;">
										{{item.diZhi}}
										    </view>
										   <view v-if="item.jiuXing" class="" style="color: #000000;font-size: 26rpx;font-weight: 550;">
											{{item.jiuXing}}
										   </view>
										   <view v-if="item.tianPan" class="topgz" style="color: #aa5500; font-size: 26rpx;font-weight: 580;">
											{{item.tianPan}}
										   </view>
										</view>
										<view class="bottom" style="display: flex;justify-content: space-between;width: 100%;padding:0 20rpx;">
										  <view class="">
										  	
										  </view>
										   <view v-if="item.baMen" class="" style="color: #f47a00;font-size: 26rpx;font-weight: 580;">
												{{item.baMen}}
										   </view>
										  <view class="b_gz" style="color: #aa5500; font-size: 26rpx;font-weight: 580;">
												{{item.diPan}}
										  </view>
										</view>
										
									</view>
								</uni-grid-item>
							</uni-grid>
						 
			</view>
			<view class="" style="margin-bottom: 25%;">
				
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import other from '@/components/other/index.vue'
 
 

	export default {
		components:{other},
		data() {
			return {
				url:'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
				useInfo:"",
				auditShow:false,
				qipaninfo:{},
				ninegongnum:[]
				
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getAudit()
			this.getuserinfo()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods:{
			//获取微信审核开关
			getAudit(){
			    let param = {};
				param.url='v3/system/front/configuration/1'
				this.$request(param).then(res=>{
					console.log(res);
					this.auditShow=res.data.auditSwitch
					
					if(this.auditShow){
						uni.setNavigationBarTitle({
							title:'奇门遁甲'
						})
					}
				})
			},
			// 获取用户信息
			getuserinfo(){
				console.log('22');
				if(!this.hasLogin){
					console.log(this.hasLogin);
					// 未登录使用示列信息获取奇门遁甲
					this.useInfo=uni.getStorageSync('exampleInfo')
					// 获取排盘信息
					let data={
						incident:'ceshi',
						name:this.useInfo.masterName,
						year:this.useInfo.masterBirthday.split(' ')[0].split('/')[0],
						month:this.useInfo.masterBirthday.split(' ')[0].split('/')[1],
						day:this.useInfo.masterBirthday.split(' ')[0].split('/')[2],
						hour:this.useInfo.masterBirthday.split(' ')[1].split(':')[0],
						minute:this.useInfo.masterBirthday.split(' ')[1].split(':')[1],
						dateType:'1',//日期类型
						leapMonth:false,//是否使用闰月
						gender:'男',//性别
						qiMenType:'1',//奇门类型
						address:'',//地区
					}
					this.getqimeninfo(data)
					
				}else{
					// 登录 用自己选择的信息获取信息
					let param = {};
					param.url='v3/member/front/master/detail'
					this.$request(param).then(res=>{
						console.log(res);
						this.useInfo=res.data
						// 获取排盘信息
						let data={
							incident:'ceshi',
							name:this.useInfo.masterName,
							year:this.useInfo.masterBirthday.split(' ')[0].split('/')[0],
							month:this.useInfo.masterBirthday.split(' ')[0].split('/')[1],
							day:this.useInfo.masterBirthday.split(' ')[0].split('/')[2],
							hour:this.useInfo.masterBirthday.split(' ')[1].split(':')[0],
							minute:this.useInfo.masterBirthday.split(' ')[1].split(':')[1],
							dateType:this.useInfo.isLeap==='true'|| this.useInfo.isLeap==='false'?'1':'0',//日期类型
							leapMonth:this.useInfo.isLeap==='true'?true:false,//是否使用闰月
							gender:this.useInfo.masterSex,//性别
							qiMenType:'1',//奇门类型
							address:'',//地区
						}
						this.getqimeninfo(data)
					})
					
				}
			},
			
		 
			//获取奇门遁甲排盘信息
			getqimeninfo(vlue){
			console.log('11');
				this.$request({
					url:'v3/front/qmdj/converted',
					method:'POST',
					header:{
						'Content-Type': 'application/json;charset=utf-8',
					},
					data:vlue
					
				}).then(res=>{
					
					this.qipaninfo=res.data
					this.ninegongnum=[]
					let nums=[4,9,2,3,5,7,8,1,6]//卦位数
					nums.forEach((itm,index)=>{
						this.qipaninfo.qiMenList.forEach(itms=>{
							if(itm==itms.juShu){
								this.ninegongnum.push(itms)
							}
						})
						
					})
					console.log(this.ninegongnum,'22jj');
					
									})
			},
			// 跳转切换档案信息
			
			userChange(){
				this.$tab.navigateTo('/pages/index/archives')
			},
		}
	}
</script>

<style lang="scss">
page{
		// padding: 16rpx;
		font-size: 28rpx;
	}
	.report_change{
		border-top: 2rpx solid #eee;
		padding: 18rpx;
		background-color: #fff;
		font-size: 24rpx;
		
		.report_change_icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 24rpx;
		}
	}
	.report_image{
		width:750rpx ;
	}
	.textbox{
		margin-top: 16rpx;
		padding: 16rpx;
		border-radius: 12rpx;
		background-color: #fff;
		
		.riqi,.panshi,.shixiang,.jieqi {
			  
			display: flex;
			padding: 0 2px;
			border-bottom: 2rpx solid #cecece;
			line-height: 80rpx;
			// .line{
			// 	width: 2rpx;
			// 	height: 80rpx;
			// 	background-color: #cecece;
			// }
			.title{
				padding: 0 34rpx;
				color: #dec9a0;
			}
			.conttex{
				padding: 0 16rpx;
			}
			.jq_cont{
				width: 80%;
				text-align: center;
				border-left: 2rpx solid #cecece;
			}
			.sx_cont{
				border-left: 2rpx solid #cecece;
			}
			.rq_cont{
				border-left: 2rpx solid #cecece;
			}
		}
		.ganzhi{
			display: flex;
			padding: 0 5rpx;
			border-bottom: 2rpx solid #cecece;
			line-height: 120rpx;
			// .line{
			// 	width: 2rpx;
			// 	height: 120rpx;
			// 	background-color: #cecece;
			// }
			.title{
				padding: 0 34rpx;
				color: #dec9a0;
			}
			.gz-cont{
				height: 120rpx;
				// width: 100%;
				display: flex;
				justify-content: space-between;
				.gz_cont_item{
					border-left: 2rpx solid #cecece;
				}
				.year,.yue,.ri,.shi {
					width: 146rpx;
					text-align: center;
				line-height: 100rpx;
				padding: 0 20rpx;
				font-size: 26rpx;
				// font-weight: 550;
			
					.tian{
						height: 30rpx;
					}
					.di{
						height: 30rpx;
					}
				}
			}
			
		}
		.kongwang{
				display: flex;
				padding: 0 2px;
				border-bottom: 2rpx solid #cecece;
				line-height: 100rpx;
				.line{
					width: 2rpx;
					height: 100rpx;
					background-color: #cecece;
				}
				.title{
					padding: 0 34rpx;
					color: #dec9a0;
				}
				
				 .kw_cont{
					 display: flex;
					 justify-content: space-between;
					 height: 100rpx;
					 .kw_cont_item{
						border-left: 2rpx solid #cecece; 
					 }
					 .year,.yue,.ri,.shi {
					 	width: 146rpx;
					 	text-align: center;
					 line-height: 100rpx;
					 padding: 0 20rpx;
					 font-size: 26rpx;
					 }
				 }
			}
			.title_num{
				border-bottom: 2rpx solid #cecece;
				display: flex;
				justify-content: space-between;
				padding: 0 6rpx;
				.title_width{
					width: 146rpx;
				}
				.title_item{
					border-right: 2rpx solid #cecece;
					text-align: center;
					padding: 0 20rpx;
					// width: 25%;
					.title{
						width: 100%;
						
						// border-bottom: 2rpx solid #cecece;
						color: #dec9a0;
						height: 60rpx;
						line-height: 60rpx;
					}
					// .line{
					//  width: 100%;
					//  height: 2rpx;
					// 	background-color: #cecece;
					// }
					.ti_cont{
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
				.title_item_m{
					text-align: center;
					 
					
					.title{
						width: 100%;
						padding: 0 20rpx;
						color: #dec9a0;
						height: 60rpx;
						line-height: 60rpx;
					}
					// .line{
					//  width: 100%;
					//  height: 2rpx;
					// 	background-color: #cecece;
					// }
					.ti_cont{
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
			.nine_box{
				margin-top: 30rpx;
				padding: 20rpx 10rpx;
				.image {
						width: 25px;
						height: 25px;
					}
				
					.text {
						font-size: 14px;
						margin-top: 5px;
					}
				
					.example-body {
						/* #ifndef APP-NVUE */
						// display: block;
						/* #endif */
					}
				
					.grid-dynamic-box {
						margin-bottom: 15px;
					}
				
					.grid-item-box {
						flex: 1;
						// position: relative;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 15px 0;
						display: flex;
					}
				
					.grid-item-box-row {
						flex: 1;
						// position: relative;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						align-items: center;
						justify-content: center;
						padding: 15px 0;
					}
				
					.grid-dot {
						position: absolute;
						top: 5px;
						right: 15px;
					}
				
					.swiper {
						height: 420px;
					}
				
					/* #ifdef H5 */
					@media screen and (min-width: 768px) and (max-width: 1425px) {
						.swiper {
							height: 630px;
						}
					}
				
					@media screen and (min-width: 1425px) {
						.swiper {
							height: 830px;
						}
					}
				
					/* #endif */
			}
	}
</style>
